import { Component } from 'react'
import Taro from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import './index.scss'
import global from '../../global';
import { Textarea, Button, Map, Swiper, SwiperItem, Picker, Input, Image } from '@tarojs/components'
import Request from "../../api";
import Event from "../../event";
export default class Index extends Component {

  constructor(props) {
    super(props);
    this.state = {
      cars: []
    };
    this.loadCars = this.loadCars.bind(this);
    this.deleteCar = this.deleteCar.bind(this);
  }

  componentWillMount () {
    this.loadCars();
    Event.on('updateCars', this.loadCars)
  }

  componentWillUnmount () { }

  componentDidHide () { }

  async loadCars() {
    try {
      let res = await Request.get('/business/wx_car/list?userId=' + global.userInfo.userId);
      if (res.data.code !== 200) {
        throw new Error();
      }
      this.setState({
        cars: res.data.rows
      })
    } catch (e) {
      console.log('加载车辆数据失败')
    }
  }

  async deleteCar(item) {
    await Taro.showLoading({
      title: '刪除中...'
    });
    try {
      let res = await Request.delete('/business/wx_car/' + item.carId);
      if (res.data.code !== 200) {
        throw new Error();
      }
      await Taro.hideLoading();
      await Taro.showToast({
        title: '移除成功',
        type: 'success'
      })
      await this.loadCars();
    } catch (e) {
      await Taro.hideLoading();
      await Taro.showToast({
        title: '移除失败请重试',
      })
      console.log('删除车辆数据失败')
    } finally {
      Taro.hideLoading();
    }
  }

  render () {

    let  {cars} = this.state;
    let map = {
      '0': '未通过',
      '1': '待审核',
      '2': '审核通过'
    }
    return (
      <View className='cars_list'>
        {
          cars.length !== 0 ? cars.map(item => {
            return (
              <View className='cars_item'>
                <Image src={require('./img/cars.png')}/>
                <View className={'info'}>
                  <Text>{item.number}</Text>
                  <Text>{item.villageName} | {item.brand} {item.model}</Text>
                </View>
                <View className={'status'}>
                  <Text style={{color: (item.status === '1' || item.status === '2') ? 'green' : 'red'}}>{map[item.status]}</Text>
                  <Text className='iconfont icon-ashbin size40 color-red' onClick={async () => {
                    await Taro.showModal({
                      title: '提示',
                      content: '确定移除么？移除后该车辆将无法通行本小区',
                      success: () => this.deleteCar(item)
                    })
                  }}/>
                </View>
              </View>
            );
          })
            :
            <View className='message_container'>
              暂无车辆，<Text onClick={() => Taro.navigateTo({url: '/pages/cars_detail/index'})}>点击新增</Text>
            </View>
        }
        {
          cars.length !== 0 && <View className='cars_item add_btn' onClick={() => Taro.navigateTo({url: '/pages/cars_detail/index'})}>
            <Text className='iconfont icon-add size50 color-grey'/>
          </View>
        }
      </View>
    )
  }
}
